<template>
  <view class="coupon-get">
    <mescroll-contain
      height="100%"
      ref="mescroll"
      :up-option="{
        noMoreSize: 10,
        empty: {
          icon: '/static/images/empty/coupon.png',
          tip: '暂无优惠券~',
          fixed: true,
        },
      }"
      @upcallback="upCallback"
    >
      <view class="coupon" v-for="item in couponList" :key="item.id">
        <coupon-card
          mode="get"
          :name="item.name"
          :money="item.money"
          :condition="item.condition"
          :time="item.effective_time"
          :scene="item.use_scene"
          :coupon-id="item.id"
          :gotten="!!item.is_receive"
          :button="{
            name: !item.is_empty ? '领取' : '已抢光',
            theme: 'primary',
            disable: !!item.is_empty || !!item.is_available,
          }"
          @button="getCoupon"
        />
      </view>
    </mescroll-contain>
  </view>
</template>

<script>
import { apiCouponList, apiCouponGet } from "@/api/store";
import { mapGetters, mapState } from "vuex";

let mescroll = null;

export default {
  name: "CouponGet",

  data() {
    return {
      couponList: [], // 优惠券列表
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  methods: {
    // 上拉加载更多
    upCallback({ num, size }) {
      apiCouponList({
        page_no: num,
        page_size: size,
      })
        .then(({ lists, page_size, count }) => {
          if (num === 1) this.couponList = [];
          this.couponList = [...this.couponList, ...lists];
          // mescroll.endBySize(page_size, count)
          mescroll.endSuccess(lists.length, count);
        })
        .catch((err) => {
          mescroll.endBySize();
        });
    },

    // 领取优惠券
    getCoupon(id) {
      apiCouponGet({ id })
        .then(() => {
          this.$toast({ title: "领取成功" });
        })
        .catch((err) => {
          console.log(err);
          // this.$toast({ title: '领取失败' })
        });

      mescroll.downCallback();
    },
  },
  onShareAppMessage() {
    const { code } = this.userInfo;
    const share = {
      path: `/bundle/pages/coupon_get/coupon_get?invite_code=${code}`,
    };
    return share;
  },
  mounted() {
    mescroll = this.$refs["mescroll"];
  },
};
</script>

<style lang="scss" scoped>
.coupon-get {
  padding: 0 20rpx;
}

.coupon {
  &:nth-child(n + 2) {
    margin-top: 20rpx;
  }
}
</style>
